<template>
  <div>
    <!-- 标题 -->
    <van-cell
      title="来一些回忆过去的句子吧！"
      title-style="font-size:24px;font-weight: bolder;"
    />
    <!-- 头像信息 -->
    <van-cell-group class="personal">
      <van-image
        round
        width="72px"
        height="60px"
        src="/images/background/leaf.jpg"
      />
      <!-- 姓名信息 -->
      <van-cell
        center
        title="虚伪"
        label="一个喜欢摆烂的前端程序猿"
        title-style="font-size:19px"
      >
        <template #right-icon>
          <van-button
            plain
            hairline
            size="small"
            icon="plus"
            color="#64C0DF"
            round
            >关注</van-button
          >
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 内容 -->
    <div class="content">
      <p>1、刻在记忆里的那个夏天，是我们一起在阳光下流下的泪水。</p>

      <p>2、青年有梦想，老年才有回忆。青年时的鲁莽，老年时的悔恨。</p>

      <p>
        3、每一段记忆，都有一个密码。只要时间，地点，人物组合正确，无论尘封多久，那人那景都将在遗忘中重新拾起。
      </p>

      <p>
        4、我们常常不能忘记一些事情，今天的行走，明天的寻找，都像在延续昨天的记忆。有个声音总在心里暗暗地说，要找到那年那时那天的那个人，感受到那年那天那时的那个情。也许是友情，也许是爱情，甚至一些不可状的小情绪。我们不得不一路寻找，找到那个最初的源头。找到又怎样?我只知找不到就不甘心，我们不由自主的踏上明天的路，找寻着昨天的一瞬间。
      </p>

      <p>5、我们微笑着说，我们停留在时光的原处，其实早已被洪流无声地卷走。</p>

      <img src="/images/background/lemon.jpg" alt="" />

      <p>
        6、一样东西无论充满了多么贵重的回忆，它都不是回忆的本身。珍贵的东西是埋藏在心里的。
      </p>

      <p>
        7、每个人都将谱写一曲新的篇章，新年不会计较你的过去，新年会象人世迎接初生婴儿般欢迎你!这一刻开始，给自己定一个目标，为自己刻画一幅蓝图，希望点什么，改掉些若干……静一静想一想，把过去抛到脑后，展望你崭新的一年，无论理想实现的艰难，至少你想去努力;结果并不重要，重要在享受过程，把理想与奋斗相结合，相信自己：我一定可以，我一定行!
      </p>

      <p>8、即便是流泪，也是一种纪念。就算是流泪，也回不到童年。</p>

      <p>9、夕阳下，童话一般的世界。</p>

      <p>
        10、昨天，永远属于过去，过去不管成功或失败，永远属于死神;昨天，如一颗陨落的流星划过天际，来不及招呼;昨天，如一朵朵漫天飞舞的的蒲公英，尽显其招摇之态。
      </p>
    </div>
    <div class="time">
      <p>编辑于2022-03-22 07:59 禁止转载</p>
    </div>
    <div style="height: 50px"></div>
    <van-goods-action>
      <van-button type="default" icon="like-o" text="喜欢" size="large" round />
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-icon
        icon="chat-o"
        text="评论"
        @click="comment = true"
      />
      <van-goods-action-icon
        icon="edit"
        text="写评论"
        @click="write_comment = true"
      />
      <van-goods-action-icon
        icon="share-o"
        text="分享"
        @click="show_Share = true"
      />
    </van-goods-action>

    <!-- 评论部分 -->
    <van-action-sheet v-model="comment" title="评论">
      <div>
        <van-cell-group class="personal" v-for="i in 8" :key="i">
          <van-image
            round
            width="62px"
            height="50px"
            src="/images/background/leaf.jpg"
          />
          <!-- 姓名信息 -->
          <van-cell
            center
            title="虚伪"
            label="写的很棒,继续加油啊up!"
            title-style="font-size:16px"
            label-class="comment_content"
          >
            <template #right-icon>
              <van-button
                plain
                hairline
                size="small"
                icon="like-o"
                color="#DC5128"
                round
              ></van-button>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-action-sheet>

    <!-- 写评论部分 -->
    <van-action-sheet v-model="write_comment" title="写评论">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="25"
        placeholder="请输入评论"
        show-word-limit
      />
      <van-button text="发送" color="#64C0DF" block />
    </van-action-sheet>
    <van-share-sheet
      v-model="show_Share"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: false,
      write_comment: false,
      message: null,
      show_Share: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.personal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  margin: 10px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.content p {
  margin: 6px;
  font-size: 19px;
}
.content img {
  max-width: 100%;
}
.time {
  margin: 0 11px;
  font-size: 15px;
  color: #969799;
}
.comment_content {
  color: black;
  display: flex;
}
</style>